<template>
  <el-row>
    <el-col :span="24">
      <el-dialog
        title="销毁操作"
        :visible="status"
        class="dialog"
        @close="guanbi()"
        @open="getData()"
      >
        <el-form :model="xiaohuiData" :rules="rules" ref="xiaohuiData" label-width="150px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="办案单位" prop="huId">
                <el-select v-model="xiaohuiData.huId">
                  <el-option
                    v-for="(item, index) in uhIdList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="物品名称" prop="pName">
                <el-input v-model="xiaohuiData.pName" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="物品处置">
                <el-input value="销毁" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="销毁对象姓名" prop="name">
                <el-input v-model="xiaohuiData.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="destroyAddress">
                <el-input v-model="xiaohuiData.destroyAddress" placeholder="输入某地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公告时间" prop="bulletinTime">
                <el-date-picker
                  v-model="xiaohuiData.bulletinTime"
                  type="date"
                  placeholder="选择公告时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="到期时间" prop="pastDueTime">
                <el-date-picker
                  v-model="xiaohuiData.pastDueTime"
                  type="date"
                  placeholder="选择到期时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="到期提醒联系人" prop="pastDueContact">
                <el-input v-model="xiaohuiData.pastDueContact"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="到期提醒联系方式" prop="pastDuePhone">
                <el-input v-model="xiaohuiData.pastDuePhone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="公告照片" class="imgbox" prop="bulletinImg">
                <image-upload v-model="xiaohuiData.bulletinImg" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="销毁照片" class="imgbox" prop="destroyImg">
                <image-upload v-model="xiaohuiData.destroyImg"></image-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-button type="primary" size="medium" @click="updateStatus_xiaohui('xiaohuiData')"
                >确认</el-button
              >
            </el-col>
            <el-col :span="12"></el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </el-col>
  </el-row>
</template>
<script>
import { updateInfo, financialInfo } from '@/api/system/financial_treatment'
import { addlist } from '@/api/system/financial_treatment'
import { getUnitListAll } from '@/api/property/unit.js'
import moment from 'moment'
export default {
  data() {
    return {
      status: false,
      data: [],
      uhIdList: [],
      xiaohuiData: {
        // 办案单位
        huId: null,
        // 物品名称
        pName: null,
        // 退还对象姓名
        name: null,
        // 输入某地址
        destroyAddress: null,
        // 公告时间
        bulletinTime: null,
        // 到期时间
        pastDueTime: null,
        // 到期提醒联系人
        pastDueContact: null,
        // 到期提醒联系方式
        pastDuePhone: null,
        //公告照片
        bulletinImg: null,
        //销毁照片
        destroyImg: null,
        status: '3'
      },
      rules: {
        huId: [{ required: true, message: '请选择办案单位',  }],
        pName: [{ required: true, message: '请输入物品名称',  }],
        name: [{ required: true, message: '请输入退还对象姓名',  }],
        destroyAddress: [{ required: true, message: '请输入输入某地址',  }],
        bulletinTime: [{ required: true, message: '请输入公告时间',  }],
        pastDueTime: [{ required: true, message: '请输入到期时间',  }],
        pastDueContact: [{ required: true, message: '请输入到期提醒联系人',  }],
        pastDuePhone: [{ required: true, message: '请输入到期提醒联系方式',  }],
        bulletinImg: [{ required: true, message: '请导入公告照片',  }],
        destroyImg: [{ required: true, message: '请导入销毁照片',  }]
      },
      pId: []
    }
  },
  methods: {
    updateStatus_xiaohui(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.xiaohuiData.bulletinTime = this.geshihuaDateTime(this.xiaohuiData.bulletinTime)
          this.xiaohuiData.pastDueTime = this.geshihuaDateTime(this.xiaohuiData.pastDueTime)

          //批量修改处置状态
          updateInfo(this.pId, 3).then((res) => {})

          //批量修改登记状态
          financialInfo(this.pId, 1).then((res) => {})

          // 添加处置数据
          addlist(this.xiaohuiData).then((res) => {})

          this.status = false
          for (let key in this.xiaohuiData) {
            this.xiaohuiData[key] = ''
          }
        } else {
          alert('请填写完整!')
          return false
        }
      })
    },
    guanbi() {
      this.status = false
      for (let key in this.xiaohuiData) {
        this.xiaohuiData[key] = ''
      }
      this.$emit('genxing')
    },
    getData() {
      this.xiaohuiData.pName = this.data.map((item) => item.pName).join(' ')
      this.data.map((item) => {
        this.pId.push(item.pId)
      })

      // 获取办案单位
      getUnitListAll().then((e) => {
        e.data.forEach((res) => {
          this.uhIdList.push({ label: res.name, value: res.id })
        })
      })

      //当事人
    },
    //时间格式化
    geshihuaDateTime(time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>
